<template>
	<view :class="isIphoneX ? 'padding-bottom' : ''">
		<!-- 头部轮播 -->
		<view class="carousel-section" v-if="advList.length > 0">
			<swiper class="carousel" circular autoplay="true">
				<swiper-item v-for="(item, index) in advList" :key="index" class="carousel-item">
					<image :src="$util.img(item.adv_image)" mode="aspectFill" @click="redirectTo(item.adv_url)" />
				</swiper-item>
			</swiper>
		</view>
		<view class="topics" v-if="info.length">
			<view class="topics-title">
				<image :src="$util.img('upload/uniapp/goods/topic_detail_left_icon.png')" mode="aspectFit"></image>
				<text>专题活动</text>
				<image :src="$util.img('upload/uniapp/goods/topic_detail_right_icon.png')" mode="aspectFit"></image>
			</view>
			<view class="topics-list">
				<navigator class="topics-item" v-for="(item, index) in info" :key="index" :url="'/pages/goods/topic_detail/topic_detail?topic_id=' + item.topic_id">
					<image :src="$util.img(item.picture_img)" mode="aspectFit"></image>
					<text class="topic-detail">{{ item.desc }}</text>
				</navigator>
			</view>
		</view>
		<view v-if="info.length == 0" class="empty">
			<view class="iconfont iconwenzhangchaxun"></view>
			<view class="ns-text-color-gray">暂无专题活动~</view>
			<button type="primary" @click="goIndex()">去首页逛逛吧</button>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import loadingCover from '@/components/loading/loading.vue';
export default {
	components: {
		loadingCover
	},
	data() {
		return {
			advList: [],
			info: [],
			isIphoneX: false //判断手机是否是iphoneX以上
		};
	},
	onLoad() {
		uni.getSystemInfo({
			success: res => {
				if (res.model.search('iPhone X') != -1) {
					this.isIphoneX = true;
				}
			}
		});
		this.initTopic();
	},
	mixins: [http],
	methods: {
		//初始化数据
		initTopic() {
			/**
			 * 获取广告内容
			 */
			this.sendRequest({
				url: 'System.Shop.advDetail',
				data: {
					ap_keyword: 'APPLET_TOPIC_SWIPER',
					export_type: 'data'
				},
				success: res => {
					if (res.code == 0) {
						this.advList = res.data.advs;
					}
				}
			});
			/**
			 * 获取活动专区内容
			 */
			this.sendRequest({
				url: 'System.Goods.promotionTopic',
				success: res => {
					if (res.code == 0) {
						this.info = res.data.data;
						if (this.$refs.loadingCover == undefined) return;
						this.$refs.loadingCover.hide();
					}
				}
			});
		},
		/**
		 * 广告位链接跳转
		 */
		redirectTo(link) {
			if (link == null || link == '') return;
			if (link.is_tabbar == 1) {
				this.$util.redirectTo(link.url, {}, 'tabbar');
			} else {
				this.$util.redirectTo(link.url);
			}
		},
		goIndex() {
			this.$util.redirectTo('/pages/index/index/index', {}, 'tabbar');
		}
	}
};
</script>

<style lang="scss">
.padding-bottom {
	padding-bottom: 68rpx !important;
}
.carousel-section {
	padding: 20rpx;
}
.carousel {
	width: 100%;
	height: 300rpx;

	.carousel-item {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
}
.topics-title {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 20rpx;
	height: 80rpx;
	background-color: #fff;
	border-radius: 10rpx;
	> text {
		margin: 0 20rpx;
		font-weight: 600;
		font-size: $ns-font-size-lg;
	}
	image {
		width: 20rpx;
		height: 20rpx;
	}
}
.topics-list {
	margin: 20rpx;
	padding: 30rpx;
	border-radius: 10rpx;
	background-color: #fff;
	image {
		width: 100%;
		height: 360rpx;
	}
	.topic-detail {
		display: block;
		overflow: hidden;
		font-size: $ns-font-size-base;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}
</style>
